<!DOCTYPE html>
<html>
            <head>
                    <meta charset="utf-8" />
                    <meta http-equiv="X-UA-Compatible" content="IE=edge">
                    <title>style</title>
                    <meta name="viewport" content="width=device-width, initial-scale=1">
                    <style>
                        #outer{
                            width: 500px;
                            height: 500px;
                            padding: 10px;
                            border: 20px solid gray;
                            background-color: blue;
                            position:relative;
                        }
                        #inner{
                            width: 400px;
                            height: 400px;
                            padding: 10px;
                            border: 20px solid rgb(0, 0, 0);
                            background-color: green;
                            position:relative;
                        }
                        #content{
                            width: 300px;
                            height: 300px;
                            padding: 10px;
                            border: 20px solid red;
                            background-color: yellow;
                        }
                    </style>
                    <script>
                        window.onload=function(){
                            var outer = document.getElementById("outer");
                            var inner = document.getElementById("inner");
                            var content = document.getElementById("content");
                            bind(content, "click", function(){
                                console.log(this);
                            });
                            content.onclick = function(event){
                                alert("content");
                            };
                            inner.onclick = function(event){
                                alert("inner");
                                event.cancelBubble = true;
                            };
                            outer.onclick = function(event){
                                alert("outer");
                            };
                            function bind(obj, eventStr, func){
                            obj.addEventListener ? obj.addEventListener(eventStr, func) : obj.attachEvent.call(obj, "on" + eventStr, func);
                            }
                        }
                        
                    </script>
            </head>
            <body>
                <div id="outer">
                    <div id="inner">
                        <div id="content">

                        </div>
                    </div>
                </div>
            </body>
        </html>